<template>
    <div class="permission-container">
        <div class="pc-btn">
            <el-button
                type="primary"
                size="mini"
                @click="addPermissionTmp(1, 0)"
                >添加权限</el-button
            >
        </div>
        <div>
            <el-table
                :data="tableData"
                style="width: 100%"
                row-key="id"
                border
                :row-class-name="tableRowClassName"
            >
                <el-table-column
                    prop="name"
                    label="名称"
                />
                <el-table-column
                    prop="code"
                    label="标识"
                />
                <el-table-column
                    prop="description"
                    label="描述"
                />
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="150"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.type === 1"
                            type="text"
                            size="small"
                            @click="addPermissionTmp(2, scope.row.id)"
                            >添加</el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click="eidtPermissionTmp(scope.row.id)"
                            >编辑</el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click="delPermissionTmp(scope.row.id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 这里就不封装 弹出框组件 -->
        <el-dialog
            :title="isEdit ? '编辑权限' : '新增权限'"
            :visible.sync="showDialog"
            :append-to-body="true"
            @close="close"
        >
            <el-form
                ref="ruleForm"
                :model="form"
                :rules="rules"
            >
                <el-form-item
                    label="权限名称"
                    label-width="150px"
                    prop="name"
                >
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item
                    label="权限标识"
                    label-width="150px"
                    prop="code"
                >
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item
                    label="权限描述"
                    label-width="150px"
                    prop="description"
                >
                    <el-input v-model="form.description" />
                </el-form-item>
                <el-form-item
                    label="开启"
                    label-width="150px"
                >
                    <el-switch
                        v-model="form.enVisible"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
                <el-form-item label-width="150px">
                    <el-button
                        type="primary"
                        @click="submitForm"
                        >{{ isEdit ? '更新' : '新增' }}</el-button
                    >
                    <el-button @click="close">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    getPermissionListRequest,
    addPermissionRequest,
    deletePermissionRequest,
    getPermissionDetailRequest,
    updatePermissionRequest
} from '@/api/permission'
import { transformListToTree } from '@/utils'

export default {
    name: 'Permission',
    data() {
        return {
            tableData: [],
            showDialog: false,
            form: {
                name: '',
                code: '',
                description: '',
                enVisible: 0,
                // 页面权限 1 按钮权限 2 ---- 用户按得什么按钮，就手动把这个是改成1和2
                type: null,
                pid: null
            },
            rules: {
                name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
                code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }]
            },
            // 当前状态是否是编辑状态， true表示编辑， false表示 新增
            isEdit: false
        }
    },
    // 发请求是在created还是mounted里面发？
    created() {
        this.getPermissionList()
    },
    mounted() {
        // 初始化请求一般放在cerated，用慢网测试看效果不明显
        // creatd dom还没有准备好，初始数据，和修改数据不影响页面，
        // 在mounted里面，dom已经渲染好了一遍，等接口返回了，（如果dom刚刚准备好，请求就返回了，那这里就会闪以下屏幕）
        // this.getPermissionList()
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            // rowIndex % 2 1 0   0表示假 false
            // rowIndex % 2 === 1
            if (rowIndex % 2) {
                // 奇数行
                return 'warning-row'
            } else {
                return 'success-row'
            }
            // return ''
        },
        async getPermissionList() {
            const res = await getPermissionListRequest()
            console.log(res)
            this.tableData = transformListToTree(res.data, 0)
        },
        addPermissionTmp(type, id) {
            // 因为这个函数是点击新增按钮的时候，触发的函数，所有变量 isEdit是false
            this.isEdit = false
            // 如果type===1 就是添加 页面权限
            // 如果type===2 就是添加 按钮级别权限
            this.showDialog = true
            this.form.type = type
            this.form.pid = id
        },
        async eidtPermissionTmp(id) {
            this.isEdit = true
            this.showDialog = true

            const res = await getPermissionDetailRequest(id)
            this.form = res.data
        },
        close() {
            this.form = this.$options.data().form
            this.showDialog = false
            this.isEdit = false
            this.$refs.ruleForm.resetFields()
        },
        // 新增和编辑都会执行这个函数
        submitForm() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    // 所有校验通过以后，执行的代码
                    if (this.isEdit) {
                        await updatePermissionRequest(this.form)
                    } else {
                        await addPermissionRequest(this.form)
                    }
                    // 新增成功以后： 关闭弹窗(情况校验和数据) + 友好提示 + 刷新页面
                    this.close()
                    this.$message.success({ message: '新增权限成功' })
                    this.getPermissionList()
                }
            })
        },
        delPermissionTmp(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    await deletePermissionRequest(id)

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getPermissionList()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        }
    }
}
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>

<style lang="scss" scoped>
.permission-container {
    margin: 20px;
    .pc-btn {
        margin-bottom: 20px;
    }
}
</style>
